<template>
  <div id="homepage">
    <el-container>
      <el-main>
        <div class="common-box">
          <div class="common-box-title">
            <el-row>
              <el-col :span="18">
                <el-icon color="#5a8fc6" size="11">
                  <HelpFilled />
                </el-icon>
                <span>最近使用</span>
              </el-col>
              <el-col :span="2">
                <span>登录人</span>
                ：{{store.userInfo.realname}}
              </el-col>
              <el-col :span="4">
                <span>组织机构：</span>
                <el-select v-model="searchForm.orgId" placeholder="请选择" ref="selectOrgRef" filterable style="width: 200px;">
                  <el-option hidden :value="searchForm.orgId ? searchForm.orgId : ''" :label="searchForm.name"></el-option>
                  <el-tree filterable :data="orgList" :props="defaultProps" :expand-on-click-node="false" :default-expand-all="true" @node-click="handleOrgNodeClick" highlight-current ref="orgTreeRef" node-key="id" class="tools-tree"></el-tree>
                </el-select>
              </el-col>
            </el-row>
          </div>
          <div class="icon-box">
            <div>
              <div class="icon-box-item">
                <img :src="getAssetsFile('images/destop/day.png')" alt class="homeimg" />
                <div class="text">检验报告</div>
              </div>
            </div>
            <div>
              <div class="icon-box-item">
                <img :src="`${getAssetsFile('images/destop/stamp.png')}`" alt class="homeimg" />
                <div>微生物系统</div>
              </div>
            </div>
            <div>
              <div class="icon-box-item tasks">
                <img :src="`${getAssetsFile('images/destop/notice.png')}`" alt class="homeimg" />
                <div>待办任务</div>
              </div>
            </div>
            <div>
              <div class="icon-box-item">
                <img :src="`${getAssetsFile('images/destop/audit.png')}`" alt class="homeimg" />
                <div>系统管理</div>
              </div>
            </div>
            <div>
              <div class="icon-box-item tasks1">
                <img :src="`${getAssetsFile('images/destop/confirm.png')}`" alt class="homeimg" />
                <div>我的消息</div>
              </div>
            </div>
            <div>
              <div class="icon-box-item tasks1">
                <img :src="`${getAssetsFile('images/destop/confirm.png')}`" alt class="homeimg" />
                <div>待打条码</div>
              </div>
            </div>
          </div>
        </div>
        <div class="common-box margin-top">
          <div class="common-box-title">
            <el-icon color="#5a8fc6" size="11">
              <HelpFilled />
            </el-icon>
            <span>我的应用</span>
          </div>
          <div class="icon-box flex justify-start">
            <div v-for="(item, index) in moduleList" :key="index" @click="gotoPage(item.baseUrl, item.id)">
              <div class="icon-box-item">
                <div class="moduleIcon" :style="{ backgroundColor: item.bigIconBgcolour }" v-if='item.baseUrl!=="daikaifa"'>
                  <el-icon size="40" class="icon">
                    <component :is="item.icon"></component>
                  </el-icon>
                  <!-- <div :style="{ color: '#fff', fontSize: '40px' }">
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </div>-->
                </div>
                  <div class="moduleIcon" style="background-color: hsla(95,41%,92%,0.9)" v-else>
                    <el-icon size="40" class="icon">
                      <component :is="item.icon"></component>
                    </el-icon>
                    <el-button type="success" plain disabled circle >待</el-button>
                  </div>
                <div>{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="deskBox">
          <div class="deskBoxLeft">
            <div class="common-box-title">
              <el-icon color="#5a8fc6" size="11">
                <HelpFilled />
              </el-icon>
              <span>我的任务</span>
            </div>
            <el-table class="honetable" v-loading="null" row-key="id" :data="list1" style="width: 100%" max-height="240px">
              <el-table-column label="任务名称" width="140" align="left">
                <template #default="scope">
                  <el-link type="primary" :underline="false">{{ scope.row.name }}</el-link>
                </template>
              </el-table-column>
              <el-table-column prop="content" label="内容" align="left" show-overflow-tooltip></el-table-column>
              <el-table-column prop="limitTime" label="要求完成时间" width="140" align="center"></el-table-column>
              <el-table-column prop="level" label="紧急程度" width="100" align="center"></el-table-column>
            </el-table>
          </div>
          <div class="deskBoxRight">
            <div class="common-box-title">
              <el-icon color="#5a8fc6" size="11">
                <HelpFilled />
              </el-icon>
              <span>我的消息</span>
            </div>
            <el-table class="honetable" v-loading="null" row-key="id" :data="list1" style="width: 100%" max-height="240px">
              <el-table-column label="任务名称" width="140" align="left">
                <template #default="scope">
                  <el-link type="primary" :underline="false">{{ scope.row.name }}</el-link>
                </template>
              </el-table-column>
              <el-table-column prop="content" label="内容" align="left" show-overflow-tooltip></el-table-column>
              <el-table-column prop="limitTime" label="要求完成时间" width="140" align="center"></el-table-column>
              <el-table-column prop="level" label="紧急程度" width="100" align="center"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="chatBox">
          <div class="chatBoxLeft">
            <div class="common-box-title">
              <el-icon color="#5a8fc6" size="11">
                <HelpFilled />
              </el-icon>
              <span>任务统计</span>
            </div>
            <div id="ecList1" class="chart"></div>
          </div>
          <div class="chatBoxRight">
            <div class="common-box-title">
              <el-icon color="#5a8fc6" size="11">
                <HelpFilled />
              </el-icon>
              <span>审核统计</span>
            </div>
            <div id="ecList2" class="chart"></div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, getCurrentInstance, watch,h} from 'vue';
import * as echarts from 'echarts';
import { notifyType, notifyMessage, getAssetsFile } from '@/utils/common';
import { AppStore } from '../stores/store';
import { ElMessage, ElMessageBox } from 'element-plus'
let store = AppStore();
const orgList = store.userInfo.orgList;

const searchForm = reactive({
  orgId: store.userInfo.orgId,
  name: store.userInfo.orgName
});

watch(() => store.userInfo, (n, o) => {
  getMenuList();
});

let defaultProps = {
  children: 'children',
  label: 'name'
};

let { proxy }: any = getCurrentInstance();
// 任务模拟数据
let list1: any = reactive([
  {
    name: '任务1',
    content: '很重要的一个任务，抓紧完成！',
    limitTime: '2023-03-15 12:00',
    level: '紧急重要'
  },
  {
    name: '任务2',
    content: '很重要的一个任务，抓紧完成！',
    limitTime: '2023-03-15 12:00',
    level: '紧急非重要'
  },
  {
    name: '任务3',
    content: '很重要的一个任务，抓紧完成！',
    limitTime: '2023-03-15 12:00',
    level: '非紧急重要'
  },
  {
    name: '任务4',
    content: '很重要的一个任务，抓紧完成！',
    limitTime: '2023-03-15 12:00',
    level: '非紧急重要'
  },
  {
    name: '任务5',
    content: '很重要的一个任务，抓紧完成！',
    limitTime: '2023-03-15 12:00',
    level: '紧急重要'
  },
  {
    name: '任务5',
    content: '很重要的一个任务，抓紧完成！',
    limitTime: '2023-03-15 12:00',
    level: '紧急重要'
  },
  {
    name: '任务5',
    content: '很重要的一个任务，抓紧完成！',
    limitTime: '2023-03-15 12:00',
    level: '紧急重要'
  }
]);

let commonList = reactive([
  {
    name: '检验报告'
  }
]);

// 模块数据
let moduleList = reactive([]);

// t图表数据
onMounted(() => {
  // 获取模块数据
  // getMenuList();
  // 获取权限数据
  finPermissionObj();

  proxy.$nextTick(() => {
    const treeName = 'orgTreeRef';
    const tree: any = proxy.$refs[treeName];
    tree.setCurrentKey(store.userInfo.orgId);
  });

  const myChart = echarts.init(document.getElementById('ecList1') as HTMLElement);
  // 绘制图表
  myChart.setOption({
    title: {
      text: '任务分类统计',
      textAlign: 'center',
      left: '50%',
      textStyle: {
        fontSize: 14
      }
    },
    grid: {
      left: 50,
      right: 50,
      top: 50,
      bottom: 40
    },
    tooltip: {},
    xAxis: {
      data: ['检验任务', '签到任务', '计划任务', '采集任务', '分配任务', '审核任务']
    },
    yAxis: {},
    series: [
      {
        name: '数量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });

  const myChart2 = echarts.init(document.getElementById('ecList2') as HTMLElement);
  // 绘制图表
  myChart2.setOption({
    title: {
      text: '任务分类统计',
      textAlign: 'center',
      left: '50%',
      textStyle: {
        fontSize: 14
      }
    },
    grid: {
      left: 50,
      right: 50,
      top: 50,
      bottom: 40
    },
    tooltip: {},
    xAxis: {
      data: ['检验审核', '签到审核', '计划审核', '采集审核', '分配审核', '任务审核']
    },
    yAxis: {},
    series: [
      {
        name: '数量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });

  window.addEventListener('resize', function () {
    myChart.resize();
  });
});

function handleOrgNodeClick(data: any) {
  moduleList.length = 0;
  searchForm.orgId = data.id;
  searchForm.name = data.name;
  store.userInfo.orgId = data.id;
  store.userInfo.orgName = data.name;
  store.setUserInfo(store.userInfo);
  const selectOrgRef: any = proxy.$refs['selectOrgRef'];
  selectOrgRef.blur();

  proxy.$http
    .get('/public/user/changeOrg', {
      params: {
        orgId: data.id
      }
    })
    .then((res: any) => {
      finPermissionObj();
    })
    .catch((err: string) => {
      notifyMessage(err, notifyType.warning, proxy);
    });
}

// 点击跳转
function gotoPage(path, id) {
  if(path=="daikaifa"){
    openMessage();
    return
  }
  localStorage.setItem('moduleId', id);
  proxy.$router.push(path);
}

function finPermissionObj() {
  proxy.$http
    .get('/api/user/sysUserAuthDetail/getLoginUserAuthMapByUserId', {
      params: {
        userId: store.userInfo.id
      }
    })
    .then((res: any) => {
      if (res.status.code !== 1) {
        notifyMessage(res.status.msg, notifyType.warning, proxy);
        return;
      }
      store.setRoleModel(res.data.modules);
      store.setModuleMenuMap(res.data.moduleMenuMap);
      store.setModulePointMap(res.data.modulePointCodeMap);
      store.setRptGroupList(res.data.rptGroupList);
      store.setInstrSetupList(res.data.instrSetupList);
      // console.log('模块数据', res.data);
      moduleList.push(...res.data.modules);
    })
    .catch((err: string) => {
      notifyMessage(err, notifyType.warning, proxy);
    });
}
const openMessage = () => {
  ElMessageBox({
    title: '提示',
    message: h('p', null, [
      h('span', { style: 'color: #277f7f;font-size: medium;' }, '功能开发中，敬请等待！'),
    ]),
  })
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/isd-body.scss';

#homepage {
  width: calc(100%);
  background-color: #fff;
  overflow-x: hidden;
  .el-main {
    overflow-x: hidden;
  }
  .common-box {
    width: calc(100% - 30px);
    padding: 16px;
    border-radius: 10px;
    box-shadow: #ccc 0px 0px 3px;

    .icon-box {
      display: flex;
      flex-wrap: wrap;
      margin-top: 21px;

      .icon-box-item {
        position: relative;
        border-radius: 10px;
        width: 100px;
        height: 108px;
        margin-left: 25px;
        text-align: center;
        transition: box-shadow 0.5s, background-color 0.5s;
        padding: 8px;
        cursor: pointer;

        .homeimg {
          width: 70px;
          height: 70px;
        }
        .moduleIcon {
          width: 70px;
          height: 70px;
          border-radius: 15px;
          margin-left: 15px;
          padding-top: 10px;
          margin-bottom: 5px;
          box-sizing: border-box;
          color: #fff;
          .icont {
            margin-top: 5px;
          }
          //待开发图标徽章 moduleIcon
          :deep(.el-button) {
            position: absolute;
            bottom: 50px;
            right: 25px;
             //background-color: #f0f9eb;
            //background-color: hsla(95,41%,92%,0.9);
            //border-color: #e1f3d8;
            cursor: pointer;
          }

        }
      }

      .tasks::before {
        position: absolute;
        top: 0px;
        left: 80px;
        content: '6';
        width: 25px;
        height: 20px;
        background-color: red;
        border-radius: 30%;
        color: white;
        font-size: 14px;
      }

      .tasks1::before {
        position: absolute;
        top: 0px;
        left: 80px;
        content: '3';
        width: 25px;
        height: 20px;
        background-color: red;
        border-radius: 30%;
        color: white;
        font-size: 14px;
      }

      .icon-box-item:hover {
        box-shadow: #ccc 0px 0px 3px;
        background-color: #f8f6f6;
      }
    }
  }

  //   标题
  .common-box-title {
    vertical-align: middle;

    span {
      font-weight: 600;
      font-size: 17px;
      margin-left: 5px;
    }
  }

  //   任务
  .deskBox {
    display: flex;
    width: calc(100% - 30px);
    height: 300px;
    padding: 16px;
    border-radius: 10px;
    box-shadow: #ccc 0px 0px 3px;
    margin-top: 21px;

    .deskBoxLeft {
      width: 50%;
    }

    .deskBoxRight {
      width: 50%;
    }
  }

  //   图表
  .chatBox {
    display: flex;
    width: calc(100% - 30px);
    height: 300px;
    padding: 16px;
    border-radius: 10px;
    box-shadow: #ccc 0px 0px 3px;
    margin-top: 21px;

    .chatBoxLeft {
      width: 50%;
    }

    .chatBoxRight {
      width: 50%;
    }
  }

  .chart {
    width: 100%;
    height: 250px;
  }
}
</style>
